import React, { Component } from 'react';
import { Toast , Modal } from 'antd-mobile'

import { TaskInfoStyled, MainStyled, PublisherStyled} from './TaskInfoStyled'

import Navigation from 'components/Navigation/Navigation'
import Button from 'components/UIButton/UIButton'
import Splashscreen from 'components/Splashscreen/Splashscreen'

import back from 'images/nav/whiteback@3x.png'
import dj  from 'images/hall/dj_l1@3x.png'
import header  from 'images/hall/touxiang2@3x.png'
import bmcg from 'images/hall/bmcg@3x.png'
import bmsb from 'images/hall/bmsb@3x.png'
import qs from "qs"
import Progress from 'components/Progressbar/Progressbar'
import { userData } from 'pages/dengluzhuce/model/userData.js'
import connect from 'pages/redux-component/connect'

const arr = ["","",""
// ,"","","","","",""
]


class TaskInfo extends Component {
  state = {
    taskData:{}
  }
  componentDidMount(){
    console.log(this.props)
    let tag = this.props.match.params.id
    console.log(tag)
    let body = {tid: this.props.match.params.id}
    fetch('/Legang/task/findtid',{   
      method:"POST",
      headers:{
          "Content-type":"application/x-www-form-urlencoded",
      },     
      body: qs.stringify(body)
    })    
    .then(response => response.json())
    .then(result => {
      if(result.flag){
        console.log(result)
        if(result.data.userone){

        if(result.data.userone.exp){
          if(result.data.userone.exp>=500){
            result.data.userone.jd = '100%'
            result.data.userone.dj = 'lv5'
          }else if(result.data.userone.exp>=400){
          result.data.userone.jd = '800%'
          result.data.userone.dj = 'lv4'
          }else if(result.data.userone.exp>=300){
          result.data.userone.jd = '60%'
          result.data.userone.dj = 'lv3'
          }else if(result.data.userone.exp>=200){
          result.data.userone.jd = '40%'
          result.data.userone.dj = 'lv2'
          }else{
            result.data.userone.dj = 'lv1'  
            result.data.userone.jd = '20%'
          }

        }else{
          result.data.userone.dj = 'lv1'
          result.data.userone.jd = '20%'
        }
      }
      var timestamp = result.data.endtime;
            var d = new Date(timestamp );   
            var date = (d.getFullYear()) + "-" + 
                    (d.getMonth() + 1) + "-" +
                    (d.getDate()) + " " + 
                    (d.getHours()) + ":" + 
                    (d.getMinutes()) + ":" + 
                    (d.getSeconds());
                result.data.endtime = date.substring(0,10)
        this.setState({
          taskData : result.data
        },
        ()=>{
          console.log(this.state.taskData)
          }
        )
      }else{
        Toast.info(result.errorMsg)
      }
      
    })
  }
  render() {
    
    return (
      <TaskInfoStyled>
        <Navigation
        
        title = "任务详情"
        leftMargin = '0 0 0 .15rem'
        leftWidth = '25%'
        leftHeight = '.44rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        clickLeft = {()=>this.onClickLeft("left")}

        ></Navigation>

        <MainStyled
        >
          <PublisherStyled>
            <div className="one">
              <p className="nichen">{this.state.taskData.userone?this.state.taskData.userone.uname||'匿名':'匿名'}</p>
              <p className='price'>￥<span>{this.state.taskData.price?this.state.taskData.price:'0'}</span><span>元</span></p>           
            </div>

            <div className="two">

              <Progress
              width='60%'
              height= '.08rem'
              borderRadius = '.02rem'
              progressWidth={this.state.taskData.userone?this.state.taskData.userone.jd:'0%'}
              progressColor = '#56D9D1'
              ></Progress>
              {/* <img className="djimg" src={dj} alt=""/> */}
              {/* <p>等级</p> */}
            </div>

            {/* <div className="three">
              <p>任务内容描述</p>
            </div> */}
          </PublisherStyled>
          <div className="taskExplain">
            <p className="explain">{this.state.taskData.tname}</p>
            <p className="explainContent">{this.state.taskData.tcontent}</p>

            <p className = "time">完成时间： <span>{this.state.taskData.endtime}</span></p>
            <p className="address">送达地址： <span>{this.state.taskData.staplace}</span></p>

            {/* <p className="name">联系人： <span>XXXXXX</span></p>
            <p className = "phone">联系电话： <span>156****6666</span></p> */}

            <p className="takers">抢单人<span>{(this.state.taskData.usertwo instanceof Array)? this.state.taskData.usertwo.length:'0'}</span>个
              {/* {
                <>
                {
                  ()=>{
                    console.log(102)
                    this.state.taskData.usertwo=['']
                    
                    if(this.state.taskData.usertwo instanceof Array){
                      this.state.taskData.usertwo.map((value,index)=>(
                      <img 
                         key={index} 
                         src={header} 
                         alt=""/>
                      ))
                    }else{

                    }
                  }
                  
                }
                </>
                
              } */}
            </p>
          </div>

          <div className="enroldiv">
            <Button
            title="报名"
            backgroundColor = "#56D9D1"
            width= '.5rem'
            height= '.5rem'
            // border = '1px solid #707070'
            titleColor = "#fff"
            titleSize = '.17rem'
            borderRadius = '.25rem'
            clickButton = {()=>this.onClickEnrol("报名")}
            ></Button>
          </div>
        </MainStyled>

        <Splashscreen tagRef={this.refTag}

          imgWidth='2.3rem'
          imgMargin='0 0 .6rem 0'
    
          titleWidth='1.4rem'
          titleHeight= '.4rem'
          titleSize='.15rem'
          titleColor='#fff'
          titleRadius='.2rem'
          titleLineHeight = '.4rem'
          titleBackgroundColor='#56D9D1'
          titleMargin='0 0 .3rem 0'
    
          didHiddenView={this.didHiddenView}

        ></Splashscreen>
      

      </TaskInfoStyled>
    );
  }
  refTag = (ref)=>{
    // 传递给子组件，用于确定目标子组件，使用将子组件作为父组件的tag属性值，使用tag调用子组件的方法
    this.tag = ref
  }
  didHiddenView = (msg)=>{
    console.log(msg)
  }

  onClickEnrol(tag){
    console.log(tag)
    Toast.info(tag, 0.5)
    let body = {
      uid: this.props.uid||userData.uid,
      tid: this.props.match.params.id
    }
    fetch('/Legang/task/jstask',{   
      method:"POST",
      headers:{
          "Content-type":"application/x-www-form-urlencoded",
      },     
      body: qs.stringify(body)
    })    
    .then(response => response.json())
    .then(result => {
      console.log(result)
      if(result.flag){
        this.tag.show({
          title:'报名成功',
          img:bmcg,
          // infomation: '2小时内到账，请耐心等待',
          // notAutoHidden: true,
          showTime: 1000,
        })
      }else{
        this.tag.show({
          title:'报名失败',
          img:bmsb,
          // notAutoHidden: true,
          showTime: 1000,
        })
      }
        
      
    })
    // this.props.history.push('/createTaskResult')
    

    
    
  }
  onClickLeft(tag){
    this.props.history.go(-1)
    // Toast.info(tag+"返回",  .5, ()=>{console.log("隐藏后进回调")}, false);

    
  }
}

export default connect(TaskInfo);